<template>
  <div class="live">
    <Header title="热门直播" />
    <swiper
      :slides-per-view="1.65238"
      :free-mode="true"
      :space-between="10"
      @swiper="onSwiper"
      @slideChange="onSlideChange"
      class="container"
    >
      <swiper-slide v-for="(item,index) in 5" :key="index">
        <div class="slides">
          <div class="status bgwrap">
            <div class="description processing advance">直播中</div>
            <div class="time">6月1日 18:00</div>
          </div>
          
          <img src="../../../assets/img/s2.webp">
          <p class="title">
            <span>中国全国肠道大会开幕式</span><br>
            <span>第一会场-北京</span>
          </p>
          <p class="info">
            <span class="title">李佳佳</span>
            <span class="duties">主任医师</span>
            <span class="hospital">北京大学人民医院</span>  
          </p>

        </div>  
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
// 热门直播
import Header from './Header' 
import { reactive } from 'vue'
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/swiper.min.css';
import 'swiper/components/pagination/pagination.scss';

export default {
  name: 'Hotlive',
  components:{
    Header,
    Swiper,
    SwiperSlide,
  },

  setup(){
    const data = reactive({
      msg:[
      ]
    })
    return {
      data
    }
  }
   
  
}
</script>

<style lang="scss" scoped>

$processing: linear-gradient(180deg, #5BB1F2 0%, #2E79E0 100%);
$advance: linear-gradient(180deg, #FFB296 0%, #FF6505 100%);

.live {
  width: 37.5rem;
  margin: 0 auto;
  .container {
    width: 100%;
    box-sizing: border-box;
    height: 20.5rem;
    padding-left: 1.8rem;
    .slides {
      // width: 21rem; 
      height: 19.5rem;
      background: #fff;
      box-shadow: 0 .2rem .6rem 0 rgba(0, 0, 0, 0.07);
      border-radius: .8rem .8rem 0 0;
      position: relative;
      .status{
        position: absolute;
        left: 0;
        top: 0;
        height: 1.6rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        background: #fff;
        border-radius: .8rem 0 .8rem 0;
        background: #8B8B8A;
        font-size: 1rem;
        font-weight: 600;
        color: #FFF;
        .processing{
          background:$processing;
        }
        .advance{
          background:$advance;
        }
        .time{
          padding-left: .3rem;
        }
      }
      .description{
        height: 1.6rem;
        border-radius: .8rem 0 .8rem 0;
        padding: 0 .5rem;
        display: flex;
        align-items: center;
      }
      .title{
        font-size: 1.2rem;
        font-weight: 600;
        color: #4F4F4F;
        text-align: left;
        padding: 1rem 0rem 1.1rem 1.4rem;
        line-height: 1.7rem;
      }
      .info{
        text-align: left;
        font-size: 1rem;
        font-weight: 400;
        color: #9F9F9F;
        .duties {
          margin-left: .4rem;
        }
        .hospital{
          margin-left: 1.1rem;
        }
      } 
      img {
        // width: 21rem;
        width: 100%;
        // border: 1px solid red;
        // width: 10rem;
        height: 11.4rem;
        border-radius: .8rem .8rem 0 0;
      }
    }
  }
  
}
</style>
